<template>
  <div class="collectlist">
    <van-nav-bar
      title="收藏列表"
      fixed
      placeholder
      z-index="999"
      left-arrow
      @click-left="$router.back()"
    />
    <div class="tabs" v-for="(item, index) in fav_list" :key="item._id"  @click="
              $router.push({ name: 'detail', query: { article_id: item._id } })
            " >
      <div>作者 ：{{ item.author }}</div>
      <div>标题 ：{{ item.title }}</div>
      <div>类型 ：{{ item.cate_name }}</div>
      <div
        :class="{
          hide: item.poster_type == 1,
          rightimg: item.poster_type == 2,
          actiImg: item.poster_type == 3,
        }"
      >
        <img
          v-for="item2 in item.imageSrc"
          :src="item2"
          alt=""
          :key="item2._id"
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "collectlist",
  data() {
    return {
      fav_list: [],
    };
  },
  created() {
    this.get_fav_list();
  },
  methods: {
    get_fav_list() {
      let uid = localStorage.getItem("tt-uid");
      this.$http({
        url: "/api/get_fav_list",
        method: "POST",
        //传参
        data: {
          user_id: uid,
          limit: 1000,
        },
      })
        .then((res) => {
          console.log(res);
          this.fav_list = res.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style lang="less" scoped>
.collectlist {
    width: 100%;
      width: 100%;
    /* margin-top: 20px;
    overflow: hidden;

    padding-top: 75px;*/
    .rightimg {
      img {
        width: 100%;
        height: 200px;
        background-size: cover;
      }
    }
    .hide {
      img {
        width: 100%;
        height: 200px;
      }
    }
    .actiImg {
      img {
        width: 33%;
        height: 100px;
        background-size: cover;
      }
    }
}
</style>